import React, { Component } from 'react'
// import { Search } from 'antd-mobile'
import { SearchOutline } from "antd-mobile-icons"

import { Tabs } from 'antd-mobile'
import { list } from "../../api/index"
// import Tab1 from '../../components/Tab1'
import Tab2 from '../../components/Tab2'
import { listsearch } from '../../api/index'
import { debounce } from '../../utils/debounce'
import { Carousel } from 'antd';
import { PullRefresh } from 'react-vant';
const onRefresh = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, 1000);
  });
};
export default class List extends Component {
  state = {
    list: [],
    value: {},
  }
  componentDidMount() {
    this.getlist();
    // console.log('this.list', this.list)
  }

  getlist = () => {
    list().then(res => {
      // console.log(res)
      this.setState({
        list: res.data.data,
      })
    })
  }



  //list 搜索
  Search = (value) => {
    console.log(value);
    debounce(() => {
      listsearch({ value }).then(res => {
        this.setState({
          value: value,
          list: res.data.data,
        })
        // console.log(res.data.data);
      })
    }, 1000)
  }


  //list详情页
  listDetail = (item) => {
    this.props.history.push({
      pathname: "/listDetail",
      params: item,
    })
  }


  render() {
    const contentStyle = {
      height: '160px',
      color: '#fff',
      lineHeight: '160px',
      textAlign: 'center',
      background: '#364d79',
    };
    // console.log('this.list', this.list)
    const { value, list } = this.state;
    return (
      <div className='listapp'>
        <header>
          <div className="search">
            <input type='text' placeholder='请输入内容' value={value.ipt} onChange={(e) => this.Search(e.target.value)} />
            <SearchOutline className='searchbutton' />
            {/* <Search placeholder='请输入内容' type='text' value={value.ipt} onChange={(e) => this.Search(e.target.value)} /> */}
          </div>
        </header>

        <main>
          <PullRefresh onRefresh={onRefresh}>
            <Tabs>
              <Tabs.TabPane title='热点' key='1'>
                {/* <Tab1 /> */}
                <div className="swiper">
                  <Carousel autoplay>
                    <div>
                      <h3 style={contentStyle}>
                        <img src="https://img1.baidu.com/it/u=3443896827,3952603472&fm=26&fmt=auto" alt="" />
                      </h3>
                    </div>
                    <div>
                      <h3 style={contentStyle}>
                        <img src="https://img2.baidu.com/it/u=4197162429,2419939361&fm=26&fmt=auto" alt="" />
                      </h3>
                    </div>
                    <div>
                      <h3 style={contentStyle}>
                        <img src="https://img1.baidu.com/it/u=2564830932,1986794290&fm=26&fmt=auto" alt="" />
                      </h3>
                    </div>
                    <div>
                      <h3 style={contentStyle}>
                        <img src="https://img2.baidu.com/it/u=2254188701,678351681&fm=26&fmt=auto" alt="" />
                      </h3>
                    </div>
                  </Carousel>
                </div>
                <div className="listlist">
                  {
                    list ? list.map((item, index) => {
                      return <dl key={index}>
                        <dt>
                          <img src={item.img} alt='' onClick={() => this.listDetail(item)} />
                        </dt>
                        <dd>
                          <p>{item.title}</p>
                          <p>
                            <span>{item.type}</span>
                            <span>{item.time}</span>
                            <span>阅读 98</span>
                            <span>赞 39</span>
                          </p>
                        </dd>
                      </dl>
                    }) : null
                  }
                </div>
              </Tabs.TabPane>
              <Tabs.TabPane title='话题' key='2'>
                <Tab2 />
              </Tabs.TabPane>
              <Tabs.TabPane title='生活' key='3'>
                蚂蚁
          </Tabs.TabPane>
              <Tabs.TabPane title='睡眠' key='4'>
                菠萝
          </Tabs.TabPane>
              <Tabs.TabPane title='男性' key='5'>
                西红柿
          </Tabs.TabPane>
              <Tabs.TabPane title='两性' key='6'>
                蚂蚁
          </Tabs.TabPane>
            </Tabs>
          </PullRefresh>

        </main>
      </div>
    )
  }
}
